<template>
  <div class="classmain">
    <ul class="leftbox">
      <li v-for="(a, index) in iid.data" :key="index" @click="goo(a.id)">
        {{ a.name }}
      </li>
      <!-- <van-sidebar v-model="activeKey">
        <van-sidebar-item title="" v-for="(a, index) in iid.data" :key="index" @click="goo(a.id)"/>
      </van-sidebar> -->
    </ul>
    <div class="rightbox">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  name: "classmain",
  data() {
    return {
      // activeKey: 0,
      iid: [],
    };
  },
  methods: {
    goo(aindex) {
      this.$router.push("/Classify/Class" + aindex);
    },
  },
  created() {
    $.get(
      "http://4w8uaw.natappfree.cc/getCatagoryByParentId/0",
      (data) => {
        this.iid = data;
      },
      "json"
    );
  },
  // computed:{
  //         b:function(){
  //             return this;
  //         }
  // }
};
</script>

<style scoped>
.classmain {
  width: 100%;
  height: 6rem;
  /* background-color:pink; */
  position: fixed;
  top: 0.44rem;
  display: flex;
  justify-content: space-between;
}
.classmain > .leftbox {
  width: 0.68rem;
  background-color: white;
  height: 100%;
  border-right: 0.02rem solid rgb(226, 226, 226);
}
.van-sidebar{
  width: 0.68rem;
  background-color: white;
  height: 100%;
  border-right: 0.02rem solid rgb(226, 226, 226);
  padding: 0rem;
}
.van-sidebar-item{
  height: 0.42rem;
  text-align: center;
  line-height: 0.42rem;
  font-size: 0.14rem;
  background-color: white;
  padding: 0rem;
}
.classmain > .leftbox > li {
  height: 0.42rem;
  text-align: center;
  line-height: 0.42rem;
  font-size: 0.14rem;
  background-color: white;
}
.classmain > .rightbox {
  /* flex-grow: 1; */
  width: 3rem;
  height: 100%;
  background-color: white;
}
</style> 